<template>
	<div>
		<div class="header">
			  <div  v-if="isDali" class='header-item'  :class='curIdx == 1 ? "active":""'  @click='tapAnalys(1)'>{{pageText.jmph}}<text></text></div>
			  <div  class='header-item' :class='curIdx == 2 ? "active":""' @click='tapAnalys(2)'>{{pageText.xsph}} <text></text> </div>
       	<div  class='header-item' :class='curIdx == 3 ? "active":""' @click='tapAnalys(3)'>{{pageText.ydtj}}<text></text></div>
		</div>
		<div @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" class="a-content" :style="setX">
			<!-- 加盟商排行 -->
			<div class="analys-contnet " >
					<JmRankings 
								:dateList='jdataList' 
								:typeList='jtypeList' 
								:rakingsDatas ='rakingsDatas'
								@chanageType = 'chanageType'
								@chanageDate = 'chanageDate'
								>     
					</JmRankings>
			</div>
			
			<!-- 销售排行 -->
			<div class="analys-contnet " >    
					<SaleRankings  
							:typeList="typeList" 
							:dateList='dateList' 
							:AgentList="AgentList" 
							:coffeeMaker="coffeeMaker"
							:salesRankList='salesRankList'
							:more='more'
							:LoadIng='LoadIng'
							:noData= 'noData'
							@chageSaleRankings="chageSaleRankings"
							@getNextPage="salesRankListNextPage"
							>
					</SaleRankings>
			</div>
		
			<!-- 月度统计 -->
			<div  class="analys-contnet">
					<MonthlyStatistics ></MonthlyStatistics>
			</div>
		</div>
		<TotalBar :orderTotal='orderTotal' :priceTotal='priceTotal'></TotalBar>
   
	</div>
</template>
<script type="text/javascript">
	import {get} from '../../utils/index'

  import util from '../../utils/index'
	import JmRankings from '@/components/JmRankings'
	import SaleRankings from '@/components/SaleRankings'
  import MonthlyStatistics from '@/components/MonthlyStatistics'
	import TotalBar from '@/components/TotalBar'

	export default{
		data(){
			return{
				isDali:true,
				user:{},
				curIdx:0,
				pageText:{
					'jmph':'加盟商排行',
					'xsph':'销售排行',
					'ydtj':'月度统计'
				},
				// 加盟商排行头部数据筛选数据
				jtypeList:[],
				jdataList:[],
				jCurData:{},
				jCurType:{},
				// 销售排行头部数据筛选数据	
				typeList:[],
				dateList:[],
				AgentList:[],
				coffeeMaker:[],
				curAgent:{},
				curDate:{},
				curType:{},
				curCoffeeMaker:{},
				
				salesRankList:[], //销售排行列表
				rakingsDatas:[],
				page:0,
				more:true,
				LoadIng:true,
				
				touchDot : 0,//触摸时的原点
				time : 0,// 时间记录，用于滑动时且时间小于1s则执行左右滑动
				interval : "",// 记录/清理时间记录
				direction:0, //方向 0：向左 1:向右
				cWidth:0,
				isMove:false,
				
				orderTotal:0,
				priceTotal:0
		
			}
		},
		
		components:{
			JmRankings,
			SaleRankings,
			MonthlyStatistics,
			TotalBar

		},   
		mounted(){		
			this.user = wx.getStorageSync('userDo');
			this.cWidth= wx.getSystemInfoSync().windowWidth;
		
			this.initData(); 
			
			if(this.user.type == 1){
					this.getJiamTotal()
					if(!this.salesRankList.length){
							this.getRakingsDatas();
					}
			}
		},
		computed: {
			setX() {
				const l = (this.curIdx-1)*this.cWidth
				return 'transform:translate3d(-'+l+'px,0,0)'
			}
		},
		watch:{
			curIdx(newData){
				if(newData == 1){ //获取代理商统计数据
					this.getJiamTotal()
				}
				
			}
		},
		methods:{
			async getJiamTotal(){
				var datas = {
					date: util.formatTime(new Date()).substring(0, 10),
          day: this.jCurType.value || 0,
          agentId: wx.getStorageSync('userDo').id,
          offset:0,
          saleType: this.jCurData.id,
          allLeagueId: 1
				}
				
				var res = await get('leagueIdOrderStatistic',datas)
				console.log(res);
				
			},
			async getTotal(){
				
				
				var user = wx.getStorageSync('userDo');
				var t = ''
        if (this.curIdx == 2){
            t = ''
        }else{
            t = this.curDate.value || 0
        }
				
				console.log(user.userId)
				
				var datas = {
					makerUserId: user.userId,
					userTypee: user.type,
					saleType: this.curType.id || "",
					time: t,
					makerId: this.curCoffeeMaker.id || '',
					leagueId: this.curAgent.userId || -1 //默认自营
				}
				
				var res = await get('coffeeOrderCount',datas)
				
				this.orderTotal = res.orderCount
				this.priceTotal = res.orderPay
			},
			async initData(){
				//获取时间筛选列表
				var font = this.user.font;
				var url = 'dictList/time_interval/'+font
				var res = await get(url);
				this.dateList = res
				this.jdataList = res
				

					//获取加盟商数据筛选列表
					var agentData = {
							select: 0,
							limit: 9999,
							offset: 0,
							parent: wx.getStorageSync('userDo').id,
							type: 2
					}
					this.AgentList = await get('getAgentListByAgentId',agentData)


					//获取咖啡机筛选列表
					var user = this.AgentList[0]
					await this.getCoffeeMakerList(user);

                
				//初始化类型筛选列表
				this.typeList = [
					{id:'',name:'全部'},
					{id:1,name:'咖啡'},
					{id:2,name:'商品'}
				]
				this.jCurType = [
					{id:'',name:'全部'},
					{id:1,name:'咖啡'},
					{id:2,name:'商品'}
				]
			},
			async getCoffeeMakerList(user){
					var coffeeData = {
							type: user.type < 0 ? wx.getStorageSync('userDo').type : user.type,
							userId: user.type < 0 ? wx.getStorageSync('userDo').userId : user.userId,
							leagueNull: user.userId != -1 ? 0 : (wx.getStorageSync('userDo').type == 1 ? -1 : 0)
					}
					this.coffeeMaker = await get('getMakerListByUserIdNoPage',coffeeData)
			},

			chageSaleRankings(item,idx){

					if( idx == 0){
							this.curAgent = item
					}else if( idx == 1 ){
							this.curType = item
					}else if( idx == 2 ){
							this.curDate = item
					}else{
							this.curCoffeeMaker = item
					}
					this.getSalesRankList(true);
			},
			salesRankListNextPage(){
					if(!this.more){
							return
					}
					this.page = this.page+1
					this.getSalesRankList();
			},
		 
			tapAnalys(idx){
					this.curIdx = idx
					if( idx == 1){
							this.getSalesRankList(true);
					}
			},
	
			async getSalesRankList(init){
					if(init){
							this.page = 0;
							this.more = true;
					}
					var user = wx.getStorageSync('userDo');
					var datas = {
							time: this.curDate.value || 0,
							userTypee: user.type,
							makerUserId: user.userId,
							offset: this.page,
							makerId: this.curCoffeeMaker.id || '',
							saleType: this.curType.id || '',
							sort: 1,
							leagueId: this.curAgent.userId || -1 ,//默认自营
							font: user.font
					}

					var list =  await get('salesRankList',datas);
					if( list.length == 0 &&　this.page == 0 ){
							this.noData = true
					}else{
							this.noData = false
					}
					if(list.length < 10){
							this.LoadIng = false;
							if(this.page > 0){
									this.more = false
							}
							
					}
					if(init){
							this.salesRankList = list	
					}else{			
							this.salesRankList = this.salesRankList.concat(list)
					}
			},

			//  加盟商排行修改产品类型筛选条件
			chanageType(item){
					this.jCurType = item
					this.getRakingsDatas()
					this.getJiamTotal();
			},
			 // 加盟商排行修改时间筛选条件
			chanageDate(item){j
					this.jCurData = item
					this.getRakingsDatas()
					this.getJiamTotal();
			},

			async getRakingsDatas(){
					var date = util.formatTime(new Date()).substring(0, 10)
					
					var data = {
							date     : date,
							day      : this.curDate.value || 0,
							agentId  : wx.getStorageSync('userDo').id,
							offset   : 0,
							limit    : 9999,
							saleType : this.curType.id || '',
					}
					this.rakingsDatas = await get('leagueIdOrderStatistic',data);

			}
			,
			touchstart(e){
				this.touchDot = e.touches[0].pageX; // 获取触摸时的原点
				// 使用js计时器记录时间  
				var _this = this;
				this.interval = setInterval(function () {
					_this.time++;
				}, 100);
		
			},
			touchmove(e){
				var touchMove = e.touches[0].pageX;
				// 向左滑动  
				if (touchMove - this.touchDot <= -40 && this.time < 10) {
					this.direction = 0
					this.isMove=true
				}
				// 向右滑动
				if (touchMove - this.touchDot >= 40 && this.time < 10) {
					this.isMove=true
					this.direction = 1
				}
		
			},
			touchend(){
				clearInterval(this.interval); // 清除setInterva
				this.time = 0;
				
				if(this.isMove){
					if(this.direction == 0){
						if(this.curIdx < 3){
							this.curIdx = this.curIdx+1
						}
						
					}else{
						if(this.curIdx>1){
							this.curIdx = this.curIdx-1
						}
						
					}
				}
				this.isMove = false			
			}
		}
	}
</script>

<style>
page{
    background: #fafafa;
}
.header{
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background: #fff;
    border-bottom: 2rpx solid #ececec;
    z-index: 10;
}
.header-item{
    flex: 1;
    font-size: 26rpx;
    text-align: center;
    position: relative;
}

.header-item.active text{
    position: absolute;
    display: block;
    width: 60rpx;
    height: 4rpx;
    background: red;
    left: 50%;
    bottom: 0;
    margin-left: -30rpx;
}
.a-content{
	position: absolute;
	
	display: flex;
	top: 80rpx;
	width: 300%;
	bottom: 0;
	transition: 0.2s;

}
.analys-contnet{
   position:relative;
   height: 100%;
	 flex: 1;
}

/*.analys-contne:nth-of-type(1){
	transform: translate3d(0,0,0);
}
.analys-contne:nth-of-type(2){
	transform: translate3d(100%,0,0);
}

.analys-contne:nth-of-type(3){
	transform: translate3d(200%,0,0);
}*/



.j-out{
    transition: 0.4s;
    transform:translate3d(-100%,0,0);
    -webkit-transform:translate3d(-100%,0,0);
}

.x-out{
    transition: 0.4s;
    transform:translate3d(100%,0,0);
    -webkit-transform:translate3d(100%,0,0);
}
.j-in{
    transition: 0.4s;
    transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
}

.sale-ranking{
    padding-top:80rpx;
}













</style>